<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style>
        .outer {
            width: 400px;
            /* 效果4需要注释掉看效果 */
            /* height: 400px; */
            background-color: rgb(46, 105, 164);
        }

        .inner1 {
            width: 100px;
            height: 100px;
            background-color: rgb(99, 164, 46);
            /* 1.单独给第一个儿子加一个下外边距，看效果 */
            /* margin-bottom: 50px; */
            /* 1效果：inner2向下移动50px */


            /* 3.给第一个儿子加一个上外边距 ,看效果~！*/
            /* margin-top: 50px; */
            /* 3效果：给第一个儿子设置的margin-top,但是父元素的outer向下移动，这就是margin塌陷问题*/


        }

        .inner2 {
            width: 100px;
            height: 100px;
            background-color: rgb(164, 127, 46);

            /* 2.单独给第二个儿子加一个上外边距，看效果 */
            /* margin-top: 50px; */
            /* 2效果：inner2 向下移动50px */


            /* 4.给inner2一个下外边距，并删除父亲的outer的高度，让父亲的内容撑开自己的高度，观察效果 */
            margin-bottom: 200px;
            /* 4效果：inner2的margin-bottom长度,调试器盒子模型没问题，
      但是实际效果并没有撑开父亲outer的高度，反而被父亲抢走了。
      可以在父元素outer下在加一个div辅助测试.
      这也是margin塌陷问题
       */

            /* 5总结：在一个父元素里边，
       对父元素的第一个元素设置上外边距值
       或者对最后一个元素设置下外边距值，
       这两个值的效果都会被父元素抢走 */

            /* 6.解决方案：
        1.给父元素加上边框属性 border:1px solid red; 设置0不行；
        2.给父元素一个padding，设置0不行。
        3.设置 overflow:hidden; 在不影响父容器大小的情况下解决塌陷问题。
        overflow属性是溢出之后的显示模式。解决塌陷的偏方。。
        

       */

        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner1">inner1</div>
        <div class="inner2">inner2</div>
    </div>
    <div style="background-color: red;">
        我是4效果的测试div
    </div>
</body>

</html>